<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!doctype html>
<html>
<head>
    <title>Title</title>
    <jsp:include page="/_layout/_css.jsp"/>
    <link rel="stylesheet" href="${ctx}/resources/css/plugins/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${ctx}/resources/css/plugins/datapicker/datepicker3.css"/>
    <link rel="stylesheet" href="${ctx}/resources/js/plugins/datapicker/bootstrap-datepicker.js"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <row>
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>基本</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>

                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="btn btn-primary" onclick="addUser()">添加用户</div>
                    <table id="table"></table>
                </div>
                style="display:none"
            </div>
        </div>
    </row>
</div>
</body>
<div class="col-sm-12" id="pop" >
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="commentForm" novalidate="novalidate">
                <div class="form-group">
                    <label class="col-sm-3 control-label">工号：</label>
                    <div class="col-sm-8">
                        <input type="text" name="enumber" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">姓名：</label>
                    <div class="col-sm-8">
                        <input type="text" name="ename" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">密码：</label>
                    <div class="col-sm-8">
                        <input id="curl" type="text" class="form-control" name="password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">性别：</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" name="esex" value="0" checked="checked"> 女
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" value="1"> 男
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">年龄：</label>
                    <div class="col-sm-8">
                        <input type="text" name="eage" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">籍贯：</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="enative">
                            <option>北京</option>
                            <option>天津</option>
                            <option>东北</option>
                            <option>河北</option>
                            <option>内蒙</option>
                            <option>陕西</option>
                            <option>河南</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">身份证号：</label>
                    <div class="col-sm-8">
                        <input type="text" name="eidnumber" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">婚姻状况：</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" name="marital" value="0" checked="checked"> 未婚
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="marital" value="1"> 已婚
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">文化水平：</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="culturalLevel">
                            <option>初中</option>
                            <option>高中</option>
                            <option>大专</option>
                            <option>本科</option>
                            <option>研究生</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">职位：</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="postion">
                            <option>业务员</option>
                            <option>财务</option>
                            <option>人事</option>
                            <option>部门经理</option>
                            <option>管理员</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">角色：</label>
                    <div class="col-sm-8">
                        <select name="roleId" class="form-control">

                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">部门：</label>
                    <div class="col-sm-8">
                        <select name="did" class="form-control">

                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-3">
                        <div class="btn btn-primary"  onclick="save()">提交</div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="ibox float-e-margins" id="ppp" style="display: none">
    <div class="ibox-content">
        <form class="form-horizontal m-t" id="commentForm1" novalidate="novalidate">
            <div class="form-group">
                <label class="col-sm-3 control-label">id：</label>
                <div class="col-sm-8">
                    <input id="id" type="text" name="id" class="form-control" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">工号：</label>
                <div class="col-sm-8">
                    <input id="enumber" type="text" name="enumber" class="form-control" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">姓名：</label>
                <div class="col-sm-8">
                    <input id="ename" type="text" name="ename" class="form-control" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">密码：</label>
                <div class="col-sm-8">
                    <input id="password" type="text" class="form-control" name="password">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">性别：</label>
                <div class="col-sm-8">
                    <label class="radio-inline">
                        <input id="esex" type="radio" name="esex" value="0" checked="checked"> 女
                    </label>
                    <label class="radio-inline">
                        <input id="esex1" type="radio" name="esex" value="1"> 男
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-8">
                    <input id="eage" type="text" name="eage" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">籍贯：</label>
                <div class="col-sm-8">
                    <select id="enative" class="form-control" name="enative">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">身份证号：</label>
                <div class="col-sm-8">
                    <input id="eidnumber" type="text" name="eidnumber" class="form-control"
                           aria-required="true" aria-invalid="false" aria-describedby="lastname-error">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">婚姻状况：</label>
                <div class="col-sm-8">
                    <label class="radio-inline">
                        <input id="marital" type="radio" name="marital" value="0" checked="checked"> 未婚
                    </label>
                    <label class="radio-inline">
                        <input id="marital1" type="radio" name="marital" value="1"> 已婚
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">文化水平：</label>
                <div class="col-sm-8">
                    <select id="culturalLevel" class="form-control" name="culturalLevel">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">职位：</label>
                <div class="col-sm-8">
                    <select id="postion" class="form-control" name="postion" >

                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">角色：</label>
                <div class="col-sm-8">
                    <select id="roleId" name="roleId" class="form-control" onclick="role()">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">部门：</label>
                <div class="col-sm-8">
                    <select id="did" name="did" class="form-control" onclick="dep()">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-3">
                    <div class="btn btn-primary"  onclick="save2()">提交</div>
                </div>
            </div>
        </form>
    </div>
</div>
<jsp:include page="/_layout/_script.jsp"/>
<script src="${ctx}/resources/js/jquery3.3.1.js"></script>
<script src="${ctx}/resources/js/plugins/validate/jquery-validate-1.19.js"></script>
<script src="${ctx}/resources/js/plugins/bootstrap-table/bootstrap-table.min.js"/>
<script src="${ctx}/resources/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

<script>

    /*
    * 页面级表单验证
    * */
    $("#pop").validate({
        rules:{
            enumber:{
                required:true,
                rangelength:[4,8]
            },
            ename:{
                required:true,
                rangelength:[2,6]
            },
            eage:{
                required:true,
                range:[18,40]
            },
            enative:"required",
            eidnumber:{
                rangelength:[18,18]
            },
            did:"required",
            roleId:"required"
        },
        messages:{
            enumber:{
                required:"请输入工号",
                rangelength:"工号长度为4-8"
            },
            ename:{
                required:"请输入员工名字",
                rangelength:"名字长度为2-6"
            },
            eage:{
                required:"请输入年龄",
                rangelength:"年龄必须在18-40岁之间"
            },
            enative:"请输入员工籍贯",
            eidnumber:{
                required:"请输入身份证号码",
                rangelength:"身份证号码为18位的数字组合"
            },
            did:"请输入部门信息",
            roleId:"请输入角色信息"
        }
    })

    /*
    bootstrap-table
     */
    $.get('${ctx}/employee/list',function (r) {
        $('#table').bootstrapTable({
            url: '${ctx}/employee/list',
            columns: [{
                field: 'enumber',
                title: '工号'
            }, {
                field: 'ename',
                title: '性名'
            }, {
                field: 'esex',
                title: '性别',
                formatter:function (v1) {
                    if (v1==1){
                        return '男'
                    } else if(v1==0){
                        return '女'
                    }
                }
            }, {
                field: 'eage',
                title: '年龄'
            }, {
                field: 'enative',
                title: '籍贯'
            }, {
                field: 'eidnumber',
                title: '身份证号'
            }, {
                field: 'marital',
                title: '婚姻状况',
                formatter:function (v1) {
                    if (v1==0){
                        return '未婚'
                    } else if (v1==1){
                        return '已婚'
                    }
                }
            }, {
                field: 'culturalLevel',
                title: '文化水平'
            },{
                field: 'postion',
                title: '职位'
            },{
                field: 'did',
                title: '部门',
                formatter:function (v1) {
                    if (v1==1){
                        return '财务部'
                    } else if (v1==2){
                        return '业务部'
                    } else if (v1==3){
                        return '人事部'
                    }
                }
            },{
                field: 'roleId',
                title: '角色',
                formatter:function (v1) {
                    if (v1==1){
                        return '超级管理员'
                    } else if (v1==2){
                        return '普通员工'
                    } else if (v1==5){
                        return '经理'
                    }
                }
            },{
                title: '操作',
                formatter:function (v1,v2) {
                    id=v2['id'];
                    return "<div class='btn btn-xs btn-danger' onclick='removeThis("+id+")'>删除</div> " +
                        "<div  class='btn btn-xs btn-warning' onclick='update("+id+")'>修改</div>"
                }
            }],
            pagination:true,
            pageSize:6,
            pageList:[2,3,6],
            search:false,
            showColumns:true,
            showColumns:true,
            sidePagination:"server",
            queryParamsType:''
        });
    },'json')





    /*
    删除
     */
    function removeThis(id){
        if (confirm("确定删除当前数据？")) {
            $.post('${ctx}/employee/remove/'+id,function (r) {
                if(r['code']==200){
                    layer.msg("删除成功");

                    $('#table').bootstrapTable('refresh');
                }
            },'json');
        }
    }


    //显示添加员工页面
    function addUser() {
        layer.open({
            title:'添加用户',
            type:1,
            content:$('#pop'),
            area:'50%'
        });
    }
    //显示修改页面
   /* function update(id) {
        layer.open({
            title:'修改用户',
            type:1,
            content:$('#ppp'),
            area:'50%'
        });
        $('#id').attr("value",id)
    }*/

    function save2(){

        $.post('${ctx}/employee/update',$('#commentForm1').serialize(),function (r) {
            if(r['code']==200){
                parent.layer.msg('操作成功');
                $('#table').bootstrapTable('refresh');
                layer.closeAll();
            }else{
                layer.msg('操作失败');
            }
        },'json')
    }

    /**
     *查询部门和角色表
     */

    //通过id查询
    function update(id){
        layer.open({
            title:'修改用户',
            type:1,
            content:$('#ppp'),
            area:'50%'
        });
        $.get('${ctx}/employee/id/'+id,function (r) {
            byId = r['byid'];
            console.log(byId);
            $('#id').attr("value",byId['id']);
            $('#enumber').attr("value",byId['enumber']);
            $('#ename').attr("value",byId['ename']);
            $('#password').attr('value',byId['password'])
            $('#eage').attr("value",byId['eage']);
            if (byId['esex']==0){
                $('#esex').attr("checked",'checked')
            } else if (byId['esex']==1) {

                $('#esex1').attr("checked",'checked')
            };

            $('#enative').html('<option value="'+byId['enative']+'">'+byId['enative']+'</option>'+"<option>北京</option>\n" +
                "                        <option>天津</option>\n" +
                "                        <option>东北</option>\n" +
                "                        <option>河北</option>\n" +
                "                        <option>内蒙</option>\n" +
                "                        <option>陕西</option>\n" +
                "                        <option>河南</option>");
            $('#eidnumber').attr("value",byId['eidnumber']);
            $('#postion').html('<option value="'+byId['postion']+'">'+byId['postion']+'</option>'+"<option>业务员</option>\n" +
                "                        <option>财务</option>\n" +
                "                        <option>人事</option>\n" +
                "                        <option>部门经理</option>\n" +
                "                        <option>管理员</option>");
            $('#password').attr('value',byId['password']);
            if (byId['marital']==0){
                $('#marital').attr("checked",'checked')
            } else if (byId['matital']==1) {

                $('#marital1').attr("checked",'checked')
            };
            $('#culturalLevel').html('<option value="'+byId['culturalLevel']+'">'+byId['culturalLevel']+'</option>'+"<option>初中</option>\n" +
                "                        <option>高中</option>\n" +
                "                        <option>大专</option>\n" +
                "                        <option>本科</option>\n" +
                "                        <option>研究生</option>");
            //derpatment
            if (byId['did']==1) {
                $('#did').html('<option value="'+byId['did']+'">财务部</option>')
            }else if (byId['did']==2){
                $('#did').html('<option value="'+byId['did']+'">业务部</option>')
            }else if (byId['did']==3){
                $('#did').html('<option value="'+byId['did']+'">人事部</option>')
            };
            //role
            if(byId['roleId'] == 1){
                $('#roleId').html('<option value="'+byId['roleId']+'">超级管理员</option>')
            }else if (byId['roleId']==2){
                $('#roleId').html('<option value="'+byId['roleId']+'">普通员工</option>')
            }else if (byId['roleId']==5){
                $('#roleId').html('<option value="'+byId['roleId']+'">经理</option>')
            }
        },'json')
    }



    //角色
    $.get('${ctx}/role/list',function (r) {
        roles = r['roleList'];
        console.log(roles);
        str='';
        for(y=0;y<roles.length;y++){
            str+='<option value="'+roles[y]['id']+'">'+roles[y]['role']+'</option>'
        }
        $('[name=roleId]').html(str);
    },'json')

    function role(){
        $.get('${ctx}/role/list',function (r) {
            roles = r['roleList'];
            console.log(roles);
            str='';
            for(y=0;y<roles.length;y++){
                str+='<option value="'+roles[y]['id']+'">'+roles[y]['role']+'</option>'
            }
            $('[name=roleId]').html(str);
        },'json')
    }

    //部门
    $.get('${ctx}/department/list',function (r) {
        departments = r['departmentList'];
        str='';
        for (i=0;i<departments.length;i++){
            str+='<option value="'+departments[i]['did']+'">'+departments[i]['dname']+'</option>'

        }
        $('[name=did]').html(str);
    },'json')

    function dep() {
        $.get('${ctx}/department/list',function (r) {
            departments = r['departmentList'];
            str='';
            for (i=0;i<departments.length;i++){
                str+='<option value="'+departments[i]['did']+'">'+departments[i]['dname']+'</option>'

            }
            $('[name=did]').html(str);
        },'json')
    }

    /**
     * 添加Ajax方式
     */
    function save(){

        $.post('${ctx}/employee/save',$('form').serialize(),function (r) {
            if(r['code']==200){
                parent.layer.msg('操作成功');
                $('#table').bootstrapTable('refresh');
                layer.closeAll();
            }else{
                layer.msg('操作失败');
            }
        },'json')
    }



</script>
</html>
